<template>
  <div class="lottery-container">
    <el-button size="large" type="primary" class="lottery-button" @click="startLottery" style="margin-bottom: 20px;">
      开始抽取不准使用的技能 ：共{{ Math.ceil(prop.skill.length / 4) }}个
    </el-button>
    <el-text v-if="lotteryNumbers.length===Math.ceil(prop.skill.length/4)" size="large"
             style="font-size: 24px;margin-bottom: 24px">
      请选择你要取回的 {{ Math.ceil(prop.skill.length / 4 / 5) }} 个技能:
      <span style="font-weight: bolder;color: red;border-style:solid;text-align:center;margin: 0 4px;padding: 0 4px" v-for="item in checkedCities">{{skill[item]+'  '}}</span>
    </el-text>
    <el-checkbox-group v-model="checkedCities" :min="0" :max="Math.ceil(prop.skill.length / 4 / 5)" class="lottery-numbers">
      <el-checkbox class="number-box" border v-for="number in lotteryNumbers" :key="number" :label="number" :value="number">
          <img :src="'/icon/'+skill[number]+'.png'" style="width: 40px; height: 40px;">
          {{ skill[number] }}
      </el-checkbox>
    </el-checkbox-group>

  </div>
</template>

<script setup>
import {ref} from 'vue'

const checkedCities = ref([])
const prop = defineProps({
  skill: []
})
const lotteryNumbers = ref([])
const startLottery = () => {
  if (prop.skill.length) {
    generateRandomNumbers(Math.ceil(prop.skill.length / 4), prop.skill.length)
  } else {
    ElMessage.error('请先选择技能')
  }
}
const generateRandomNumbers = (count, max) => {
  if (lotteryNumbers.value.length < count) {
    // numbers.add()
    let number = Math.floor(Math.random() * max)
    while (lotteryNumbers.value.indexOf(number) !== -1) {
      number = Math.floor(Math.random() * max)
    }
    lotteryNumbers.value.push(number)
  }
  // return Array.from(numbers)
}
const clean = () => {
  lotteryNumbers.value = []
  checkedCities.value=[]
}


defineExpose({
  clean
})
</script>

<style scoped>
.lottery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lottery-numbers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 16px;
  margin-bottom: 32px;
}

.number-box {
  width: 180px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
}

.lottery-button {
  font-size: 20px;
  padding: 12px 32px;
}
</style>